<template>
	<div class="zcnews">
		<van-search v-model="cname" @input="searchC" placeholder="请输入政策名称" />
		<div class="b-c">
			<div class="b-body" v-for="(item, index) in showList" :key="index" @click="toDetail(item)">
				<div class="b-title">
					<span class="type" :class="['bg0', 'bg1', 'bg2', 'bg3', 'bg4'][num]">{{ type }}</span>
					<span class="titles">{{ item.a }}</span>
				</div>
				<div class="b-line">
					<div>
						<div class="zfdj" style="font-size: 13px">政策等级</div>
						<div class="zfdj_value">{{ getName(item.tabList) }}</div>
					</div>
					<div>
						<div class="zfdj" style="font-size: 13px">发布日期</div>
						<div class="zfdj_value">{{ item.a1 }}</div>
					</div>
				</div>
				<div class="b-tab">
					<div v-for="(pre, index) in item.tabList" :key="index">
						{{ pre }}
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import { info } from './info.js';
	export default {
		name: 'zcnews',
		/*1. Vue扩展 */
		extends: '', // extends和mixins都扩展逻辑，需要重点放前面
		mixins: [],
		components: {},
		/* 2. Vue数据 */
		props: {},
		model: { prop: '', event: '' }, // model 会使用到 props
		data() {
			return {
				cname: '',
				num: 0,
				list: [],
				kList: [
					'国家级',
					'省级',
					'苏州市',
					'常熟市',
					'昆山市',
					'吴中区',
					'姑苏区',
					'高新区',
					'张家港市',
					'太仓市',
					'吴江区',
					'相城区',
					'工业园区',
				],
				type: '',
			};
		},
		computed: {},
		watch: {}, // watch 监控的是 props 和 data，有必要时监控computed
		/* 3. Vue资源 */
		filters: {},
		directives: {},
		/* 4. Vue生命周期 */
		created() {
			// 输出json
			// info.forEach((pre) => {
			// 	pre.tabList = pre.a4.split(',');
			// });
			// console.log(JSON.stringify(info));

			this.type = this.$route.query.type;
			this.num = this.$route.query.num;
			const list = JSON.parse(JSON.stringify(info));
			this.showList = list
				.filter((pre) => pre.TAG === this.$route.query.type)
				.sort((a, b) => new Date(b.a1).getTime() - new Date(a.a1).getTime());
		},
		mounted() {},
		destroy() {},
		/* 5. Vue方法 */
		methods: {
			goUrl(url) {
				// this.$router.push({
				// 	name: url,
				// });
			},
			getName(item) {
				let name = '-';
				if (item && item.length > 0) {
					item.forEach((element) => {
						if (this.kList.includes(element)) {
							name = element;
						}
					});
				}
				console.log(name);
				return name;
			},
			searchC() {
				const list = JSON.parse(JSON.stringify(info));
				this.showList = list
					.filter((pre) => pre.TAG === this.$route.query.type)
					.filter((val) => val.a.indexOf(this.cname) > -1);
			},
			toDetail(item) {
				sessionStorage.setItem('zcObj', JSON.stringify(item));
				this.$router.push('/policy/detail');
			},
			getUrlParam(name) {
				const queryStr = String(window.location).split('?')[1] || '';
				name = encodeURIComponent(name);
				let arr = new RegExp('(^|&)' + name + '=([^&]*)(&|$)').exec(queryStr);
				if (arr) {
					return decodeURIComponent(RegExp.$2);
				} else {
					return '';
				}
			},
		}, // all the methods should be put here in the last
	};
</script>
<style scoped lang="scss">
	.zcnews {
		height: 100vh;
		background-color: #ededed;
		display: flex;
		flex-direction: column;
		.type {
			padding: 2px 6px;
			color: #fff;

			font-size: 14px;
			font-weight: normal;
			border-radius: 4px;
			margin-bottom: 3px;
			margin-right: 4px;
			display: inline-block;
		}
		.zfdj {
			color: #7c7c7c;
			font-weight: normal;
		}
		.zfdj_value {
			color: #000000;
			font-weight: normal;
			font-size: 14px;
		}
		.titles {
			color: #000000;
			font-size: 16px;
			font-weight: bold;
		}
		.bg0 {
			background: #3f9f71;
		}
		.bg1 {
			background: #c2a04d;
		}
		.bg2 {
			background: #7e6dbc;
		}
		.bg3 {
			background: #3282e4;
		}
		.bg4 {
			background: #bf7564;
		}
		.b-c {
			flex: 1;
			overflow-y: auto;
		}
		.b-body {
			border-radius: 5px;
			background: #fff;
			margin: 10px;
			padding: 12px;
			.b-title {
				font-family: Source Han Sans SC;
				// font-weight: 600;
				font-size: 15px;
				color: #000000;
			}
			.b-line {
				display: flex;
				margin: 6px 0;
				align-items: center;
				justify-content: space-between;
				& > div:first-of-type {
					width: 70%;
					font-size: 14px;
					font-weight: 600;
					color: #000000;
				}
				& > div:last-of-type {
					font-size: 14px;
					color: #000000;
					font-weight: 600;
				}
			}
			.b-tab {
				display: flex;
				flex-wrap: wrap;
				font-size: 13px;
				color: #3282e4;
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 12px;

				& > div {
					margin-top: 4px;

					// height: 18px;
					background: #e8f3fd;
					// line-height: 18px;
					padding: 2px 6px;
					margin-right: 3px;
					margin-bottom: 3px;
				}
			}
		}
	}
</style>
